import React from 'react';
import { Link, useLocation } from 'react-router-dom';
import './Navbar.css';
import logo from '../../assets/logo1.png';
import { useAuth } from '../../contexts/AuthContext';

/**
 * 导航栏组件
 * 悬浮在页面顶部，包含logo、标题、导航菜单和用户信息
 */
const Navbar: React.FC = () => {
  const { user, logout } = useAuth();
  const location = useLocation();

  return (
    <nav className="navbar">
      <div className="navbar-container">
        {/* 左侧logo和标题 */}
        <div className="navbar-left">
          <Link to="/" className="navbar-brand">
            <img src={logo} alt="玄枢足球预测" className="navbar-logo" />
            <span className="navbar-title">玄枢足球预测</span>
          </Link>
        </div>
        
        {/* 中间导航菜单 */}
        <div className="navbar-center">
          <nav className="navbar-nav">
            <Link 
              to="/" 
              className={`nav-link ${location.pathname === '/' ? 'active' : ''}`}
            >
              首页
            </Link>
            <Link 
              to="/matches" 
              className={`nav-link ${location.pathname === '/matches' ? 'active' : ''}`}
            >
              比赛数据
            </Link>
            <Link 
              to="/membership" 
              className={`nav-link ${location.pathname === '/membership' ? 'active' : ''}`}
            >
              会员系统
            </Link>
          </nav>
        </div>
        
        {/* 右侧用户信息 */}
        <div className="navbar-right">
          <div className="user-info">
            <span className="user-name">欢迎，{user?.nickname || user?.username}</span>
            <button onClick={logout} className="logout-btn">
              退出登录
            </button>
          </div>
        </div>
      </div>
    </nav>
  );
};

export default Navbar;